<table>でCalendar UIを組む：その1

code:eg1.tsx

/** @jsx h */

/** @jsxFrag Fragment */

import {h, Fragment, render} from "../preact/mod.tsx";

import { getAllDaysInCalendar } from "../getAllDaysInCalendar/mod.ts";

import { isToday } from "../date-fns/mod.ts";

const App = ({ onClose }) => {

const weeks = getAllDaysInCalendar(new Date());

const month = new Date().getMonth();

return (<>

<style>{`

.calendar-wrap {

position: fixed;

top: 10%;

left 10%;

margin: 0 auto;

}

@media (max-width: 767.98px) {

.calendar-wrap {

display: flex;

flex-direction: column;

}

}

.calendar {

width: 100%;

border-collapse: collapse;

th, td {

text-align: center;

padding: 10px;

font-size: 14px;

font-weight: bold;

}

th { padding: 6px 10px; }

}

@media (max-width: 767.98px) {

.calendar {

th, td {

padding: 6px;

font-size: 12px;

}

th { padding: 3px 6px; }

}

}

.calendar {

.sun {

}

.sat {

}

}

`}</style>

<div className="calendar-wrap" onClick={onClose}>

<table className="calendar">

<thead>

<tr>

<th className="sun">Sun</th>

<th>Mon</th>

<th>Tue</th>

<th>Wed</th>

<th>Thu</th>

<th>Fri</th>

<th className="sat">Sat</th>

</tr>

</thead>

<tbody>{weeks.map(

(dates) => (<tr>{dates.map((date) => <DateCell date={date} month={month} />)}</tr>)

)}</tbody>

</table>

</div>

</>);

};

const DateCell = ({ date, month }) => {

const classNames = [];

if (isToday(date)) classNames.push("today");

if (date.getDay() === 0) classNames.push("sun");

if (date.getDay() === 6) classNames.push("sat");

if (date.getMonth() !== month) classNames.push("mute");

return (<td className={classNames.join(" ")}>{date.getDate()}</td>);

};

const div = document.createElement("div");

const shadowRoot = div.attachShadow({ mode: "open" });

document.body.append(div);

// 消すときはカレンダーをクリックする

render(<App onClose={() => div.remove()}/>, shadowRoot);